<template>
  <div id="Report">
    <ul>
      <li>
        <div>
          <p style="font-size:12px">评估单号：{{details.uuid}}</p>
          <p style="font-size:12px">评估时间：{{details.estimateTime}}</p>
        </div>
        <div class="success">已完成</div>
      </li>
      <li>
        <div>
          <p style="font-weight:bold">{{details.enterpriseName}}</p>
          <p>申请融资额度：{{details.amount}}万元</p>
        </div>
        <div>
          <router-link class="gotoQy" :to="'/bgDetails/' + details.enterpriseId">企业评估信息</router-link>
        </div>
      </li>
    </ul>

    <!-- 评估详细内容 -->
    <div class="details-list" v-if="isProduct">
      <p>感谢贵司使用链信金科融资服务平台，贵我双方秉承相互信任、友好沟通的原则，根据贵司的融资需求与实际经营状况，拟定为贵司推荐以下融资手段</p>
      <div class="tabList">
        <ul class="lists">
          <li
            ref="a"
            @click="details.shortTermProducts && details.shortTermProducts.length ? tabIndex = 0 : null"
            :class="{'active' : tabIndex == 0}"
          >短期({{this.shortArr.length}}/{{details.shortTermProducts ? details.shortTermProducts.length : 0 }})</li>
          <li
            @click="details.middleTermProducts && details.middleTermProducts.length ? tabIndex = 1 : null"
            :class="{'active' : tabIndex == 1}"
          >中期({{this.middleArr.length}}/{{details.middleTermProducts ? details.middleTermProducts.length : 0 }})</li>
          <li
            ref="abc"
            @click="details.longTermProducts && details.longTermProducts.length ? tabIndex = 2 : null"
            :class="{'active' : tabIndex == 2}"
          >长期({{this.longArr.length}}/{{details.longTermProducts ? details.longTermProducts.length : 0 }})</li>
        </ul>

        <ul class="list-content">
          <li v-if="tabIndex == 2 && details.longTermProducts && details.longTermProducts.length">
            <Swipe class="my-swipe" :loop="false" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.longTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step v-if="showChange">
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" :size="18" v-model="item.checked" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li
            v-if="tabIndex == 1 && details.middleTermProducts && details.middleTermProducts.length"
          >
            <Swipe class="my-swipe" :loop="false" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.middleTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step v-if="showChange">
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" :size="18" v-model="item.checked" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li v-if="tabIndex == 0 && details.shortTermProducts && details.shortTermProducts.length">
            <Swipe class="my-swipe" :loop="false" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.shortTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step v-if="showChange">
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" v-model="item.checked" :size="18" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>
        </ul>
      </div>
      <p style="margin-top: 20px;">可根据自身融资需求申请短、中、长期多种产品，点击申请后我司融资顾问将与您联系，为贵司定制融资方案</p>
    </div>

    <p class="info" v-else>很遗憾，当前暂无产品服务符合您的融资需求！</p>
    <!-- 弹出层 -->
    <Popup v-model="popupShow">
      <div class="popup">
        <p style="font-size: 16px; font-weight:bold; text-align:center">请确认您的联系方式</p>
        <div class="form">
          <div>
            <p>联系人</p>
            <input type="text" v-model="post.name" placeholder="请输入联系人" />
          </div>

          <div>
            <p>移动电话</p>
            <input style="width: 60%" v-model="post.phone" type="text" placeholder="请输入电话" />
            <button style="color: #2F54EB" @click="sendCodes" v-if="isShowCodeBtn">获取验证码</button>
            <button style="color: #ccc" v-else>{{times}}s</button>
          </div>

          <div>
            <p>输入验证码</p>
            <input type="text" v-model="post.code" placeholder="请输入验证码" />
          </div>
          <div style="text-align: center; margin-top: 20px">
            <Buttons
              style="margin: 0 5px;"
              type="default"
              @click="popupShow = false"
              size="small"
            >取消</Buttons>
            <Buttons style="margin: 0 5px;" type="info" size="small" @click="postDatas">确认</Buttons>
          </div>
        </div>
      </div>
    </Popup>

    <div class="bottomBar" v-if="isProduct">
      <div style="margin-right: 15px">评估完成</div>
      <div class="barBtn">
        <div>
          <button @click="gotoDoc(details.docUrl)">下载</button>
          <p>融资建议书（评估版）</p>
        </div>
        <div v-if="details.hasFinancingPlan == 1">
          <button @click="$router.push('/financing/' + details.planCode)">已申请</button>
          <p>点击查看融资服务详情</p>
        </div>
        <div v-else>
          <button @click="sqClick">正式申请</button>
          <p>已选择产品服务：{{this.shortArr.length+this.longArr.length+this.middleArr.length}}</p>
        </div>
      </div>
    </div>
    <div class="bottomBar" v-else>
      <div style="margin-right: 15px">评估完成</div>
      <div class="btn">
        <router-link to="/assessment" class="button">重新评估</router-link>
      </div>
    </div>
    <Box />
  </div>
</template>

<script>
import { Swipe, SwipeItem, Step, Steps, Switch, Popup, Button } from "vant";
import { estimateDetail, downLoad } from "api/Home";
import { sendCode, regPwdAndMobile } from "api/User";
import { financingApply } from "api/AsessmentApply";
import Box from "components/Box";
import axios from "axios";
import BaseUrl from "utils/imgBaseUrl";
export default {
  components: {
    Box,
    Swipe,
    SwipeItem,
    Step,
    Steps,
    Popup,
    Buttons: Button,
    "van-switch": Switch,
  },
  name: "Report",
  data() {
    return {
      details: {},
      post: {
        name: "",
        phone: "",
        code: "",
      },
      swiperWidth: window.innerWidth - 70,
      tabIndex: 0,
      isProduct: false,
      total: 0,
      popupShow: false,
      isShowCodeBtn: true,
      times: 60,
      shortArr:[],
      middleArr:[],
      longArr:[],
      showChange:true
    };
  },
  methods: {
    gotoDoc(doc) {
      window.location.href = "/api" + doc;
    },
    postDatas() {
      let postArr = [];
      let {
        longTermProducts,
        middleTermProducts,
        shortTermProducts,
      } = this.details;
      if (longTermProducts) {
        longTermProducts.forEach((el) => {
          if (el.checked) {
            postArr.push(el.pkId);
          }
        });
      }

      if (middleTermProducts) {
        middleTermProducts.forEach((el) => {
          if (el.checked) {
            postArr.push(el.pkId);
          }
        });
      }

      if (shortTermProducts) {
        shortTermProducts.forEach((el) => {
          if (el.checked) {
            postArr.push(el.pkId);
          }
        });
      }
      let regName = /^[\u4e00-\u9fa5]{2,4}$/;
      
      if(!regName.test(this.post.name)){
        this.$toast("请正确输入您的姓名");
        return false
      }
      financingApply({
        applyId: this.details.id,
        captcha: this.post.code,
        contact: this.post.name,
        mobile: this.post.phone,
        productIds: postArr.join(","),
      }).then(({ data, code, message }) => {
        if (!code) {
          this.$toast("提交成功，请等待财务顾问与您联系");
          this.isProduct = true;
          this.$router.push("/applysuccess/" + data.code);
        } else {
          this.$toast(message);
        }
      });
    },
    sendCodes() {
      if (/^1[3456789]\d{9}$/.test(this.post.phone)) {
        sendCode({ phoneNum: this.post.phone }).then(({ code, message }) => {
          if (!code) {
            const timer = setInterval(() => {
              if (this.times <= 1) {
                this.isShowCodeBtn = true;
                this.times = 60;
                clearInterval(timer);
                return false;
              } else {
                this.times--;
                this.isShowCodeBtn = false;
              }
            }, 1000);
          } else {
            this.$toast(message);
          }
        });
      } else {
        this.$toast("手机号输入有误");
      }
    },
    sqClick() {
      let {
        longTermProducts,
        middleTermProducts,
        shortTermProducts,
      } = this.details;
      if (longTermProducts) {
        let a = 0;
        longTermProducts.forEach((el) => {
          if (el.checked) {
            a++;
          } else {
            this.total = 0;
          }
        });

        this.total += a;
      }

      if (middleTermProducts) {
        let b = 0;
        middleTermProducts.forEach((el) => {
          if (el.checked) {
            b++;
          } else {
            this.total = 0;
          }
        });
        this.total += b;
      }

      if (shortTermProducts) {
        let c = 0;
        shortTermProducts.forEach((el) => {
          if (el.checked) {
            c++;
          } else {
            this.total = 0;
          }
        });
        this.total += c;
      }
      if (this.shortArr.length>0||this.middleArr.length>0||this.longArr.length>0) {
        this.popupShow = true;
      } else {
        this.$toast("请选择产品在提交");
      }
    },
    checkBtn(type,check,pkId){
      if(type===1){
        if(check){
          this.shortArr.push(pkId)
        }else{
          this.shortArr.forEach((el,index)=>{
            if(el===pkId){
              this.shortArr.splice(index,1);
            }
          })
        }
      }
      if(type===2){
        if(check){
          this.middleArr.push(pkId)
        }else{
          this.middleArr.forEach((el,index)=>{
            if(el===pkId){
              this.middleArr.splice(index,1);
            }
          })
        }
      }
      if(type===3){
        if(check){
          this.longArr.push(pkId)
        }else{
          this.longArr.forEach((el,index)=>{
            if(el===pkId){
              this.longArr.splice(index,1);
            }
          })
        }
      }
    },
  },
  created() {
    let uuid = this.$route.params.uuid;
    estimateDetail({ uuid }).then(({ code, data, message }) => {
      if (!code) {
        if (data.longTermProducts && data.longTermProducts.length)
          this.tabIndex = 2;
        if (data.middleTermProducts && data.middleTermProducts.length)
          this.tabIndex = 1;
        if (data.shortTermProducts && data.shortTermProducts.length)
          this.tabIndex = 0;
       
        if (
          data.longTermProducts ||
          data.middleTermProducts ||
          data.shortTermProducts
        ) {
          this.isProduct = true;
        }
        // this.$nextTick(el => {
        //   this.$refs.abc.click()
        //   setTimeout(() => {
        //     this.$refs.a.click()
        //   }, 10)
        // })
        this.details = data;
        console.log(data)
        if(data.actionStatus!==0){
          this.showChange = false
        }else{
          this.showChange = true
        }
      } else {
        this.$toast(message);
      }
    });
  },
};
</script>

<style lang="stylus" scoped>
@import '../assets/styl/mixin.styl'
#Report
  height 100vh
  background-color #F7F7F7
  padding-bottom rem(50)
  ul
    li
      background-color #fff
      border-top rem(10) solid #F7F7F7
      padding rem(10)
      font-size rem($ft14)
      display flex
      justify-content space-between
      align-items center
      line-height rem(30)
      .success
        color #2F54EB
        width rem(50)
      .gotoQy
        padding rem(5) rem(10)
        color #2F54EB
        border 1px solid #2F54EB
        border-radius rem(25)
        font-size rem(12)
  .info
    text-align center
    margin-top rem(20)
    font-size rem($ft14)
    color #666
  .bottomBar
    display flex
    position fixed
    bottom 0
    height rem(60)
    align-items center
    padding 0 rem(15)
    background-color #fff
    border-top rem(1) solid #eee
    width 100%
    .barBtn
      height 100%
      border-left 1px solid #eee
      display flex
      justify-content space-around
      align-items center
      text-align center
      flex 1
      a, button
        color #fff
        background-color #2F54EB
        width rem(80)
        padding rem(4) 0
        line-height rem(18)
        border-radius rem(25)
        margin-bottom rem(4)
      p
        font-size rem(10)
        text-align center
        color #666
    .btn
      width rem(280)
      border-left 1px solid #E0E0E0
      text-align right
      .button
        padding rem(5) rem(15)
        font-size rem($ft14)
        background-color #2F54EB
        color #fff
        border-radius rem(25)
  .details-list
    padding-bottom rem(80)
    p
      padding rem(20) rem(15)
      background-color #F7F7F7
      font-size rem(12)
      color #666
      line-height rem(20)
    .tabList
      background-color #fff
      font-size rem($ft16)
      .lists
        display flex
        justify-content space-around
        align-items center
        li
          display block
          flex 1
          text-align center
          color #666
          font-weight bold
        .active
          position relative
          color #2F54EB
          &::before
            position absolute
            bottom 0
            left 50%
            transform translateX(-50%)
            content ''
            width rem(30)
            height rem(2)
            background-color #2F54EB
      .list-content
        li
          background-color #fff
          border-top 0
          padding 0 rem(10)
          .list
            height rem(144)
            border-radius rem(6)
            border-left rem(4) solid #2F54EB
            box-shadow rem(0) rem(0) rem(5) rgba(0, 0, 0, 0.2)
            padding rem(10) rem(15)
            box-sizing border-box
            margin rem(10)
            line-height rem(24)
            h2, .dkjg
              display flex
              justify-content space-between
      [class*=van-hairline]::after
        border 0
      >>> .van-step__title
        color #333 !important
      >>> .van-step--vertical
        padding rem(5) rem(5) rem(5) 0
      .lines
        display flex
        align-items center
  .van-popup
    border-radius rem(10)
    width rem(300)
    .popup
      overflow hidden
      padding rem(20)
      .form
        p
          font-size rem(14)
          margin rem(10) 0
        input
          border 1px solid #eeeeee
          width 100%
          padding rem(8)
          box-sizing border-box
          font-size rem(14)
.my-swipe
  width 100% !important
  .van-swipe__track
    width 100% !important
  .van-swipe-item
    width rem(305) !important
</style>